window.addEventListener("load", function () {
	// 渲染
	let modelHtml = `
	<form action="#" class="login">
	<span class="fc-gray close1">close</span>
	<img src="../img/loginlogo.png" alt="" class="mb-20" />
	<div class="fe flex-c-c mb-20">
		<h4 class="on">账号登录</h4>
		|
		<h4>扫码登录</h4>
	</div>

	<!-- 账号登录 -->
	<div class="second account">
		<div class='formcontrol rel'>
			<span class="iconfont5 icon-a-icon_login_id pas"></span>
			<input type="text" placeholder="用户名/手机号/邮箱" id='user2'/>
			<span class="iconfont3 icon-icon_login_cuowutishix abs3"></span>
			<small class="text"></small>
		</div>
		<div class="mb-10 formcontrol rel">
			<span class="iconfont5 icon-mima pas"></span>
			<input type="password" placeholder="密码" id='password2'/>
			<span class="iconfont3 icon-icon_login_cuowutishix abs3"></span>
			<small class="text"></small>
		</div>
		<p class="right mb-10"><a href="" class="blue">忘记密码</a></p>
		<p class="mb-10"><button>登录</button></p>
		<p class="right">
			还没有源码账号，<a href="../html/register.html" class="blue"
				>立即注册</a
			>
		</p>
	</div>
	<!-- 扫码登录 -->
	<div class="second QR">
		<div>
			<img src="../img/103-demo.png" alt="" />
			<p>微信扫码登录</p>
			<p>未关注源码科技公众号，请先关注后再登录</p>
		</div>
		<p class="right">
			还没有源码账号，<a href="../html/register.html" class="blue"
				>立即注册</a
			>
		</p>
	</div>
</form>
<!-- 注册有礼 -->
<form action="" class="rel regis">
<span class="fc-gray close1">close</span>
				<h1>欢迎注册</h1>
				<h1>百款接口免费试用</h1>
				<p id='ad' class='rel'><img src="../img/reg-gift.png" alt="" id="gift" />
				<span class="mb-20 gift">注册即送300元大礼包</span>
				</p>
				
				<p class="rel formcontrol">
				<input
						type="text"
						placeholder="用户名（6~20位字母数字）"
						class="input1"
						id="put1"/>
					<span class="iconfont3 icon-icon_login_cuowutishix abs1"></span>
					<small class="text"></small>
				</p>
				<p class="rel formcontrol">
				<input
				type="text"
				placeholder="请输入手机号码"
				class="input1"
				id="put2"/>
					<span class="iconfont3 icon-icon_login_cuowutishix abs1"></span>
					<small class="text"></small>
				</p>
				<p class="rel">
				<input type="text"
						placeholder="请输入手机短信验证码"
						class="input2" id="put3"/>
					<button id="btn1" class='textCode'>获取验证码</button>
					<span class="iconfont3 icon-icon_login_cuowutishix abs1"></span>
					<small class="text"></small>
				</p>
				<p class="rel formcontrol">
			<input
						type="password" placeholder="请输入6至12位的密码"
						class="input1"
						id="put4"/>
					
					<span class="iconfont3 icon-icon_login_cuowutishix abs1"></span>
					<small class="text"></small>
				</p>
				<p class="rel fz-12">
				<input type="checkbox" /> 我已阅读并接受
					<a href="" class="fc-blue fz-12">《源码用户服务协议》</a>
					<a href="" class="fc-blue fz-12">《源码隐私政策》</a>
				</p>
				<p><button id="btn2">立即注册</button></p>
			</form>`;
	$(".model").innerHTML = modelHtml;

	// 模态框
	// 关闭点击事件
	// 遍历

	$(".close1").forEach(function (v) {
		v.addEventListener("click", function () {
			$(".model").style.display = "none";
			document.body.style.overflow = "auto";
		});
	});

	// 登录点击事件
	$(".log-top").addEventListener("click", function () {
		// 模态框显示
		$(".model").style.display = "block";
		// 隐藏进度条
		document.body.style.overflow = "hidden";
		// 登录显示
		$(".login").style.display = "block";
		$(".regis").style.display = "none";
	});
	// 注册点击事件
	$(".register-top").addEventListener("click", function () {
		// 模态框显示
		$(".model").style.display = "block";
		document.body.style.overflow = "hidden";
		// 注册显示
		$(".regis").style.display = "block";
		$(".login").style.display = "none";
	});

	// 扫码登录与账号登录点击事件
	// 获取元素
	let hNodes = $(".model h4");
	let messages = $(".second");

	// 默认状态
	hNodes[0].classList.add("on");
	messages[0].classList.add("on1");
	// 遍历绑定点击事件
	tab(".model h4", "on", ".second", "on1");

	// 获取节点
	const user = $("#put1");
	const tel = $("#put2");
	const testNode = $("#put3");
	const password = $("#put4");
	const user2 = $("#user2");
	const password2 = $("#password2");
	// 登录表单提交事件
	$(".login").addEventListener("submit", function (event) {
		if (!user2.value == "" && !password2.value == "") {
		} else {
			// 阻止提交
			event.preventDefault();
		}
		// 表单验证函数
		// 验证表单
	});
	// 注册表单提交事件
	$(".regis").addEventListener("submit", function (event) {
		if (
			reg1.test(user.value.trim()) &&
			reg2.test(tel.value.trim()) &&
			reg3.test(password.value.trim())
		) {
		} else {
			// 阻止提交
			event.preventDefault();
		}
		// 表单验证函数
		// 验证表单
	});

	// 失焦事件
	// 正则表达式
	var reg1 = /^\d{6,20}$/;
	var reg2 = /^\d{11}$/;
	var reg3 = /^\d{6,12}$/;

	// 注册用户名
	user.addEventListener("blur", function () {
		console.log(user);
		// 判断
		if (this.value.trim() === "") {
			// 验证错误函数调用
			testError(user, "用户名不得为空");
		} else if (!reg1.test(this.value.trim())) {
			testError(user, "用户格式不正确");
		} else {
			testSuccess(user);
		}
	});
	// 登录用户名
	user2.addEventListener("blur", function () {
		// 判断
		if (this.value.trim() === "") {
			// 验证错误函数调用
			testError(user2, "用户名不得为空");
		} else {
			testSuccess(user2);
		}
	});
	//验证码
	testNode.addEventListener("blur", function () {
		// 判断
		if (this.value.trim() === "") {
			// 验证错误函数调用
			testError(testNode, "验证码不得为空");
		} else {
			testSuccess(testNode);
		}
	});
	// 手机号
	tel.addEventListener("blur", function () {
		console.log(tel);
		// 判断
		if (this.value.trim() === "") {
			// 验证错误函数调用
			testError(tel, "手机号不得为空");
		} else if (!reg2.test(this.value.trim())) {
			testError(tel, "手机号格式不正确");
		} else {
			testSuccess(tel);
		}
	});
	// 注册密码
	password.addEventListener("blur", function () {
		console.log(password);
		// 判断
		if (this.value.trim() === "") {
			// 验证错误函数调用
			testError(password, "密码不得为空");
		} else if (!reg3.test(this.value.trim())) {
			testError(password, "密码格式不正确");
		} else {
			testSuccess(password);
		}
	});
	// 登录密码
	password2.addEventListener("blur", function () {
		// 判断
		if (this.value.trim() === "") {
			// 验证错误函数调用
			testError(password2, "密码不得为空");
		} else if (!reg3.test(this.value.trim())) {
			testError(password2, "密码格式不正确");
		} else {
			testSuccess(password2);
		}
	});
	// 验证失败
	function testError(input, message) {
		// 获取父节点
		const parentNode = input.parentElement;
		// 父节点提添加失败类
		parentNode.classList.add("error");
		parentNode.classList.remove("success");
		parentNode.querySelector(".text").textContent = message;
		parentNode.querySelector(".iconfont3").style.display = "block";
	}
	// 验证成功
	function testSuccess(input) {
		// 获取父节点
		const parentNode = input.parentElement;
		// 父节点提添加失败类
		parentNode.classList.add("success");
		parentNode.classList.remove("remove");
		parentNode.querySelector(".text").textContent = "";
		parentNode.querySelector(".iconfont3").style.display = "none";
	}

	// 验证码倒计时
	// 倒计时
	// 绑定点击事件

	$(".textCode").addEventListener("click", function () {
		let num = 10;
		let times = setInterval(function () {
			$(".textCode").disabled = true;
			$(".textCode").textContent = `${num}秒`;
			num--;
			if (num < 0) {
				clearInterval(times);
				$(".textCode").disabled = false;
				$(".textCode").textContent = "获取验证码";
			}
		}, 1000);
	});
});
